<template>
  <el-form ref="modifyUserInfoForm" label-width="80">
    <el-form-item label="父级">
      <el-cascader clearable
                   v-model="data.pcode"
                   :options="options"
                   :props="{label:'name', value:'code', checkStrictly: true, disabled: data.code }"
                   @change="changeOption"
      ></el-cascader>
    </el-form-item>
    <el-form-item label="权限名">
      <el-input v-model="data.name" />
    </el-form-item>
    <el-form-item label="识别码">
      <el-input v-model="data.code" />
    </el-form-item>
    <el-form-item label="排序">
      <el-input v-model="data.rankSort" />
    </el-form-item>
    <el-form-item label="菜单">
      <el-switch v-model="data.isMenu" inline-prompt active-text="是" inactive-text="否"/>
    </el-form-item>
    <el-form-item v-if="!data.isMenu" label="权限标识">
      <el-input v-model="data.authorization"/>
    </el-form-item>
    <el-form-item v-if="data.isMenu" label="路由路径">
      <el-input v-model="data.routerPath" />
    </el-form-item>
    <el-form-item v-if="data.isMenu" label="icon">
      <el-input v-model="data.icon" />
    </el-form-item>
    <el-form-item v-if="!data.isMenu" label="访问路径">
      <el-input v-model="data.url" />
    </el-form-item>
  </el-form>
</template>

<script>
import { getPermissionTree } from '@/api/permission'
import { ref } from 'vue'

export default {
  name: 'BaseForm',
  props: { modelValue: {} },
  computed: {
    data: {
      get () {
        return this.modelValue
      },
      set (val) {
        this.$emit('update:modelValue', val)
      }
    }
  },
  setup () {
    return {
      options: ref([]),
    }
  },
  methods: {
    getOptions () {
      getPermissionTree().then(val => {
        console.log(val.data)
        this.options = val.data
      })
    },
    changeOption (val) {
      if (!val || val[val.length - 1] === this.data.code) {
        this.data.pcode = null
        this.data.pcodes = null
        this.data.levels = 0
        return
      }
      console.log('pcode', this.data.pcode)
      this.data.pcode = val[val.length - 1]
      this.data.pcodes = val.toLocaleString()
      this.data.levels = val.length
      console.log(val)
    }
  },
  mounted () {
    this.getOptions()
  },
  watch: {
    code: function () {
      console.log(this.code)
    },
    data:
      function () {
        this.getOptions()
      }
  }
}
</script>

<style scoped>

</style>
